<template>
	<view class="orderDetails">
		<view class="inner">
			<view class="card-1 card">
				<!-- 1待付款  2带配送 3待提货 4已提货 5退款 -->
				<view class="lbox">
					<text>{{ info.status_info }}</text>
					<view class="text2" v-if="info.status == 1 && xindanshijian > 0">
						订单将于
						<u-count-down :time="xindanshijian1" format="HH小时mm分ss秒 "></u-count-down>
						后自动关闭
					</view>
					<view class="text2" v-if="info.status == 3 && xindanshijian > 0">
						订单将于
						<u-count-down :time="xindanshijian" format="HH小时mm分ss秒 "></u-count-down>
						后自动收货
					</view>
				</view>
				<view class="rbox">
					<image v-if="info.status === 1 || info.status === -5" src="../../static/images/xq00.png" mode="aspectFit"></image>
					<image v-if="info.status === 2" src="../../static/images/xq01.png" mode="aspectFit"></image>
					<image v-if="info.status === 3" src="../../static/images/xq02.png" mode="aspectFit"></image>
					<image v-if="info.status === 4" src="../../static/images/xq03.png" mode="aspectFit"></image>
					<image v-if="info.status === 5" src="../../static/images/xq04.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="card-2 card">
				<view class="info">
					<text>收货人：</text>
					<text>{{ info.shouhuo_info.name }} {{ info.shouhuo_info.phone }}</text>
				</view>
				<view class="info">
					<text>收货地址：</text>
					<text>{{ info.shouhuo_info.address }}</text>
				</view>
			</view>
			<view class="card-3 card" v-for="(item, index) in info.goods_info" :key="index">
				<view class="info info-other">
					<text>{{ item.info.title }}</text>
					<text>{{ info.goods_type_desc }}</text>
					<text>{{ info.take_type_desc }}</text>
				</view>
				<view class="info">
					<text>{{ item.info.en_title }}</text>
				</view>
				<view class="info">
					<text>重量(KG)</text>
					<text>{{ item.weight }}KG</text>
				</view>
			</view>
			<view class="card-4 card">
				<view class="card-title">商品详情</view>
				<view class="goodsbox">
					<view class="item" v-for="(value, index) in info.products" :key="index">
						<image :src="value.image" mode=""></image>
						<view class="card-4-info">
							<view class="row">
								<text>{{ value.title }}</text>
								<text>{{ value.key_vals }}</text>
							</view>
							<view class="row2">
								<text>{{ value.jifen }} 鞋服豆</text>
								<text>X{{ value.num }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="card-5 card">
				<view class="card-title">价格明细</view>
				<view class="info">
					<text>商品总价</text>
					<text>共{{ summation() }}件商品</text>
					<text>{{ summation('jifen') }} 鞋服豆</text>
				</view>
				<!-- <view class="info">
					<text>配送费</text>
					<text>满100免配送费</text>
					<text v-if="info.yunfei">￥{{ info.yunfei }}</text>
					<text v-else>免运费</text>
				</view>
				<view class="info">
					<text>优惠券</text>
					<text></text>
					<text v-if="info.pay_info.yhq">-￥{{ info.pay_info.yhq || 0 }}</text>
					<text v-else>无</text>
				</view> -->
				<u-divider></u-divider>
				<view class="total_pay">
					<text>合计应付：</text>
					<text>{{ summation('jifen') }} 鞋服豆</text>
				</view>
			</view>
			<view class="card-6 card">
				<view class="card-title">订单信息</view>
				<view class="info">
					<text>订单编号：</text>
					<text>{{ info.order_id }}</text>
					<view class="copy-box" @click="j_copy(info.order_id)">
						<image src="@/static/images/copy.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="info">
					<text>下单时间：</text>
					<text>{{ info.dtTime }}</text>
				</view>
				<view class="info">
					<text>配送方式：</text>
					<text v-if="info.peisong_type == 1 && info.status != 4">自提</text>
					<text v-else-if="info.peisong_type == 1 && info.status == 4">自提 （自提码：{{ info.shequ.tihuoma }} ）</text>
					<text v-else-if="info.peisong_type == 2">社区配送</text>
					<text v-else="">快递</text>
				</view>
				<view class="info">
					<text>订单备注：</text>
					<text>{{ info.remark || '无' }}</text>
				</view>
			</view>
			<view v-if="info.status >= 3" class="card-8 card">
				<view class="card-title">物流信息</view>
				<view class="info" @click="j_copy(info.order_id)">
					<text>物流单号</text>
					<text>{{ info.fahuo_info.order_id }}</text>
				</view>
				<view class="info">
					<text>承运物流</text>
					<text>{{ info.fahuo_info.company }}</text>
				</view>
				<!-- <view class="info" >
					<text>物流电话</text>
					<text>{{ info.take_phone }}</text>
				</view> -->
				<u-read-more showHeight="100" toggle textIndent="0" openText="收起" close-text="展开" color="#333333">
					<view class="steps-box" v-if="express.Traces.length > 0">
						<u-steps current="2" direction="column" activeColor="#CF2025" inactiveColor="">
							<u-steps-item :title="item.AcceptStation" :desc="item.AcceptTime" v-for="(item, index) in express.Traces" :key="index"></u-steps-item>
						</u-steps>
					</view>
				</u-read-more>
			</view>
			<u-loading-page :loading="loading"></u-loading-page>
		</view>
		<u-modal :show="qx_modal" title="确定取消该订单吗？" @close="modal = false" :closeOnClickOverlay="true">
			<view class="u-modal-btnbox" slot="confirmButton">
				<button @click="qx_modal = false">取消</button>
				<button @click="qx_order">确认</button>
			</view>
		</u-modal>
		<footer-btn v-if="info.status === 1 || info.status == -5" @submit="submit" twoBtn round="40" oneText="取消订单" twoText="去付款"></footer-btn>
		<footer-btn v-if="info.status === 3" round="40" text="确认收货" @submit="submit"></footer-btn>
		<footer-btn v-if="info.status === 4" round="40" text="前往评论" @submit="toNav(`pinglun/pinglun?id=${id}`)"></footer-btn>
	</view>
</template>

<script>
import API from '@/common/api';
export default {
	name: 'orderDetails',
	data() {
		return {
			id: '',
			loading: true,
			qx_modal: false,
			info: { shouhuo_info: {}, pay_info: {}, fahuo_info: {}, products: [] },
			form: {},
			express: { Traces: [] },
			index_config: {},
			xindanshijian: '',
			xindanshijian1: ''
		};
	},
	computed: {
		summation() {
			return (key, i = 0) => {
				if (this.info.products.length > 0) {
					if (key === 'jifen') {
						return this.info.products
							.reduce((total, current) => {
								return total + parseFloat(current[key]) * parseFloat(current['num']);
							}, 0)
							.toFixed(i);
					}else{
						return this.info.products
							.reduce((total, current) => {
								return total + parseFloat(current['num']);
							}, 0)
							.toFixed(i);
					}
				} else {
					return 0;
				}
			};
		}
	},
	onLoad(data) {
		this.id = data.id || 31;
		this.init();
		this.get_config();
	},
	methods: {
		get_config() {
			this.$http.getJson('index_config', {}).then((res) => {
				this.index_config = res.data;
				//确认收货倒计时时间
				if (this.info.fahuo_info) {
					this.xindanshijian = this.get_timestamp(this.info.fahuo_info.fahuo_time) + this.index_config.time_shouhuo * 24 * 60 * 60 * 1000 - this.get_timestamp();
				}
				//待付款自动关闭时间
				this.xindanshijian1 = this.get_timestamp(this.info.dtTime) + this.index_config.time_pay * 60 - this.get_timestamp();
				this.xindanshijian1 = this.xindanshijian1 * 1000;
			});
		},
		init() {
			this.loading = true;
			this.$http
				.getJson('orders_detail', {
					id: this.id
				})
				.then((res) => {
					this.loading = false;
					if (res.code == 1) {
						try {
							res.data.shequ.image = this.empty(res.data.shequ.image) ? 1 : res.data.shequ.image;
							res.data.price_all = (Number(res.data.price) - Number(res.data.yunfei)).toFixed(2);
						} catch (e) {
							//TODO handle the exception
						}

						this.info = res.data;
						this.info.price_need_pay = this.info.price_need_pay.toFixed(2);

						if (res.data.status >= 3) {
							this.express_getInfo(res.data.fahuo_info.fahuo_id);
						}

						if (res.data.status == -5 || res.data.status == 3) {
							this.get_config();
						}
					}
				});
		},
		submit(flag) {
			console.log(flag);
			switch (flag) {
				case 1:
					// 取消订单

					this.qx_modal = true;
					break;
				case 2:
					// 去付款
					this.go_pay();
					break;
				default:
					// 确认收货
					this.qr_shouhuo();
					break;
			}
			//
			return;
		},
		go_pay() {
			let product_info = this.info.products.map((item) => {
				return {
					title: item.title,
					inventoryId: item.id,
					productId: item.productId,
					num: item.num,
					image: item.image,
					key_vals: item.key_vals,
					price_sale: item.price_sale
				};
			});
			uni.setStorageSync('order_info', product_info);
			this.toNav(`order/qrOrder`);
		},
		qr_shouhuo() {
			uni.showModal({
				title: '确定到货了吗',
				success: (res) => {
					if (res.confirm) {
						this.$http
							.getJson('orders_qrshouhuo', {
								order_id: this.id
							})
							.then((res) => {
								console.log(res);
								if (res.code == 1) {
									this.init();
									uni.showToast({
										title: res.message
									});
								} else {
									uni.showToast({
										title: res.message,
										icon: 'none'
									});
								}
							});
					}
				}
			});
		},
		qx_order() {
			this.$http
				.getJson('orders_qxOrder', {
					order_id: this.id
				})
				.then((res) => {
					if (res.code == 1) {
						this.info.status = -1;
						this.info.statusInfo = '订单已取消';
						uni.showToast({
							title: res.message
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},

		express_getInfo(fahuo_id) {
			uni.showLoading({
				title: '加载中...'
			});
			this.$http
				.getJson('express_getInfo', {
					fahuo_id: fahuo_id
				})
				.then((res) => {
					uni.hideLoading();
					this.express = res.data;
				});
		}
	}
};
</script>

<style lang="less" scoped>
.orderDetails {
	.inner {
		padding: 24rpx 32rpx;
		.card + .card {
			margin-top: 16rpx;
		}
		.card {
			padding: 24rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			background: #ffffff;
			.card-title {
				padding-bottom: 20rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #000000;
			}
		}

		.info + .info {
			margin-top: 20rpx;
		}
		.info {
			position: relative;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #000000;
			text:nth-of-type(1) {
				width: 130rpx;
				font-weight: bold;
			}
			text:nth-of-type(2) {
				// .bor();
				flex: 1;
				color: #666666;
			}
			text:nth-of-type(3) {
				margin-top: 12rpx;
				font-size: 20rpx;
				color: #222222;
			}
			.copy-box {
				.fix-c-y();
				right: 0;
				width: 32rpx;
				height: 32rpx;
				.j-active();
				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
		.info-other {
			display: block;
			text:nth-of-type(1) {
				font-weight: bold;
				margin-right: 40rpx;
			}
			text:nth-of-type(2) {
				color: #cf2025;
			}
			text:nth-of-type(3) {
				float: right;
			}
		}
		.card-1 {
			display: flex;
			align-items: center;
			padding: 34rpx;
			.lbox {
				flex: 1;
				display: flex;
				justify-content: center;
				flex-direction: column;
				text:nth-of-type(1) {
					font-size: 28rpx;
					font-weight: bold;
					color: #000000;
				}
				.text2 {
					display: flex;
					align-items: center;
					margin-top: 12rpx;
					font-size: 20rpx;
					color: #666666;
				}
			}
			.rbox {
				display: flex;
				image {
					width: 72rpx;
					height: 64rpx;
				}
			}
		}
		.card-2 {
			.info {
				text:nth-of-type(2) {
					color: #000000;
				}
			}
		}

		.card-4 {
			.goodsbox {
				.item + .item {
					margin-top: 16rpx;
				}
				.item {
					display: flex;
					& > image {
						width: 144rpx;
						height: 144rpx;
						background: #f8f8f8;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
					}
					.card-4-info {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 24rpx;
						& > .row {
							flex: 1;
							width: 100%;
							display: flex;
							flex-direction: column;
							text:nth-of-type(1) {
								font-size: 28rpx;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: bold;
								color: #000000;
							}
							text:nth-of-type(2) {
								margin-top: 8rpx;
								font-size: 20rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;
							}
						}
						.row2 {
							.flex-between();
							text:nth-of-type(1) {
								font-size: 28rpx;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: bold;
								color: #000000;
							}
							text:nth-of-type(2) {
								font-size: 24rpx;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: bold;
								color: #000000;
							}
						}
					}
				}
			}
		}
		.card-5 {
			// .clearFix();
			.total_pay {
				// float: right;
				.flex-between();
				text:nth-of-type(1) {
					font-size: 24rpx;
					color: #222222;
				}
				text:nth-of-type(2) {
					font-size: 36rpx;
					color: #222222;
					// &:before {
					// 	content: '￥';
					// 	font-size: 28rpx;
					// 	color: #ff0000;
					// }
				}
			}
		}
		.card-6 {
			.info {
				display: block;
				text:nth-of-type(1) {
					width: 130rpx;
					font-weight: bold;
				}
			}
		}
		.card-7 {
			height: 108rpx;
			.flex-between();
			& > text {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #222222;
			}

			.rbox {
				display: flex;
				align-items: center;
				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 24rpx;
				}
				& > text {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
				}
			}
		}
		.card-8 {
			.info {
				text:nth-of-type(1) {
					color: #222222;
					font-weight: bold;
				}
				text:nth-of-type(2) {
					flex: 1;
					text-align: right;
				}
			}
			.steps-box {
				padding-top: 44rpx;
				clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
			}
		}
	}
}
</style>
